<template>
  <div class="notice-board">
    <el-card>
      <template #header>
        <span>通知公告</span>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="item in notices"
          :key="item.id"
          :timestamp="item.date"
          :color="item.type === 'info' ? '#409EFF' : (item.type === 'warning' ? '#E6A23C' : '#F56C6C')"
        >
          <strong>{{ item.title }}</strong>
          <div>{{ item.content }}</div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const notices = ref([
  { id: 1, title: '系统升级通知', content: '会议室预约系统将于2025-01-10 22:00-24:00进行升级维护。', date: '2025-01-08', type: 'info' },
  { id: 2, title: '会议室临时维护', content: '会议室A将于2025-01-12全天进行空调检修，暂停预约。', date: '2025-01-09', type: 'warning' },
  { id: 3, title: '新功能上线', content: '会议日历、我的预约、预约审批等新功能已上线，欢迎体验！', date: '2025-01-10', type: 'success' },
])
</script>

<style scoped lang="scss">
.notice-board {
  padding: 20px;
}
</style>